<template>
  <!-- 创建时间：2023/5/11 -->
  <!-- 作者：admin -->
  <!-- CurrentPlayingListPage组件说明： 正在播放列表-->
    <div class="playing">
        <!--正在播放的歌曲-->
        <div class="playing-song">
            <h1>正在播放</h1>
            <div>
                <el-empty
                        description="暂无正在播放"
                        :image-size="150"
                        v-show="!hasIsPlayingSong">
                </el-empty>
                <song-item ref="PlayingItem"
                           v-show="hasIsPlayingSong"
                           :music-detail="curPlayingMusic"
                           :is-can-show-bg="false"/>
            </div>
        </div>
        <!-- 正在播放的列表-->
        <div class="playing-list">
            <h1>即将播放</h1>
            <div>
                <el-empty
                        description="暂无播放列表"
                        :image-size="150"
                        v-show="!playingSongList.playList.length">

                </el-empty>
                <div v-for="item in playingSongList.playList"
                     :key="item.id">
                    <song-item :music-detail="item" :is-can-show-bg="false"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";
import SongItem from "@/minicomponents/SongItem.vue";

export default {
    name: "CurrentPlayingListPage",
    components: {SongItem},
    computed: {
        ...mapState(['curPlayingMusic', 'playingSongList']),
        hasIsPlayingSong() {
            const {url} = this.curPlayingMusic
            return url !== ''
        }
    },
    mounted() {
        // 正在播放的歌曲的条目背景变成蓝色
        const {PlayingItem} = this.$refs
        PlayingItem.isStay = true
    },
    watch: {
        curPlayingMusic: {
            deep: true,
            handler(newVal) {
                const {PlayingItem} = this.$refs
                PlayingItem.isStay = true
            }
        }
    }
}
</script>

<style scoped lang="less">

</style>